/*
  1) 这个文件的主要作用是什么?
  - 权限控制 (整个项目的 页面访问拦截 和 权限 都是在这个文件中写的)
  - 一般像后台管理系统项目, 都是需要做权限控制的
    - 如果用户没有token, 统一拦截去登录
    - 如果用户访问一些不需要拦截的页面, 直接放行

  2) 页面访问拦截的具体步骤
  - 配置一个白名单数组
    const whiteList = ['/login', '/404']
  - 在路由的全局前置守卫中
    - 获取token
    - 判断
      - 如果有token
        - 访问的是登录页, 或者404页面, 引导去首页
        - 访问其它页面, 直接放行
      - 如果没有token
        - 访问的是登录页, 或者404页面,直接放行
        - 访问是其它页面, 拦截去登录页面
*/

import router from './router' // 引入路由
import NProgress from 'nprogress' // 引入进度条工具库
import store from './store' // 引入vuex方便取tiken
import 'nprogress/nprogress.css' // 引入进度条css样式
// 白名单
const whiteList = ['/login', '/404']

// 路由前置守卫
router.beforeEach(async(to, from, next) => {
  NProgress.start() // 开启进度条
  if (store.getters.token) { // 如果有token 并且再去登录页 直接拦截   跳转去主页
    if (to.path === '/login') {
      next('/')
      NProgress.done() // 关闭进度条
    } else {
      if (!store.getters.userId) { // 如果没有登录就发起请求获取用户信息
        // 获取用户信息的网页访问权限点
        const { roles } = await store.dispatch('user/getUserInfo')
        // // 调用筛选的方法 筛选出能够访问的页面
        const routes = await store.dispatch('permission/filterRoutes', roles.menus)
        // // 添加到动态路由中
        router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }])
        // // 添加是异步 重新在执行这个函数  添加才能完成
        next(to.path)
      } else {
        next() // 如果有token并且不是去登录页 直接放行
      }
    }
  } else { // 如果没有token 判断是不是去白名单里面的页面
    if (whiteList.includes(to.path)) {
      next()
    } else { // 如果没有token 并且去的页面不在白名单里 直接强制跳转到登录页
      next('/login')
      NProgress.done() // 关闭进度条
    }
  }
})

// 路由后置守卫
router.afterEach(() => {
  NProgress.done() // 关闭进度条
})
